import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { h } from 'vue';

import { DictEnum } from '@vben/constants';
import { VbenIcon } from '@vben/icons';
import { getPopupContainer } from '@vben/utils';

import { Button } from 'ant-design-vue';

// import { z } from '#/adapter/form';
import { getDictOptions } from '#/utils/dict';
import { renderDict, renderTag } from '#/utils/render';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    componentProps: {
      getPopupContainer,
      options: getDictOptions(DictEnum.QUERY_PAGE_NO),
    },
    fieldName: 'pageNo',
    label: '页面编号',
  },
  {
    component: 'Input',
    fieldName: 'label',
    label: '字段名称',
  },
  // {
  //   component: 'Select',
  //   componentProps: {
  //     getPopupContainer,
  //     options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
  //   },
  //   fieldName: 'status',
  //   label: '字段状态 ',
  // },
];

export const columns: VxeGridProps['columns'] = [
  {
    title: '页面>字段',
    field: 'name',
    treeNode: true,
    width: 180,
  },
  {
    title: '类型',
    field: 'type',
    width: 80,
    slots: {
      default: ({ row }) => {
        return (
          <span class="flex justify-center text-[20px]">
            {row.type === 'page' ? (
              <span title="页面">
                <VbenIcon icon="ph:file-vue-duotone" />
              </span>
            ) : (
              <span title="字段">
                <VbenIcon icon="ic:baseline-text-fields" />
              </span>
            )}
          </span>
        );
      },
    },
  },
  {
    title: '字段标识',
    field: 'fieldName',
    width: 120,
  },
  {
    title: '组件类型',
    field: 'component',
    slots: {
      default: ({ row }) => {
        if (row.component === 'Page') {
          return renderTag('页面');
        }
        return renderDict(row.component, DictEnum.QUERY_COMPONENT_TYPE);
      },
    },
    width: 190,
  },
  {
    title: '条件选项',
    field: 'operates',
    slots: { default: 'operates' },
  },
  {
    title: '关联字典',
    field: 'defaultValue',
    width: 110,
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    resizable: false,
    width: 'auto',
  },
];

export const drawerSchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
    fieldName: 'id',
  },
  {
    component: 'Select',
    componentProps: (model) => ({
      getPopupContainer,
      disabled: !!model.id,
      options: getDictOptions(DictEnum.QUERY_PAGE_NO),
    }),
    fieldName: 'pageNo',
    label: '页面编号',
    rules: 'selectRequired',
  },
  {
    component: 'Select',
    componentProps: {
      getPopupContainer,
      options: getDictOptions(DictEnum.QUERY_COMPONENT_TYPE),
    },
    // defaultValue: '1',
    fieldName: 'component',
    help: '筛选条件的交互形式，如输入框、下拉框、时间选择器等',
    label: '组件类型',
    rules: 'selectRequired',
  },
  {
    component: 'Input',
    fieldName: 'label',
    label: '字段名称',
    help: '字段中文标题，比如联系人名称',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'fieldName',
    label: '字段标识',
    help: '字段英文小写key，需与后端查询参数名保持大小写一致，比如name、userName',
    rules: 'required',
  },
  {
    component: 'Select',
    fieldName: 'operates',
    label: '条件选项',
    componentProps: {
      getPopupContainer,
      mode: 'multiple',
      options: getDictOptions(DictEnum.QUERY_OPERATE_TYPE),
    },
    help: '字段对应的条件操作选项，编辑时请合理选择后端支持的条件',
    defaultValue: [],
    rules: 'selectRequired',
  },
  {
    component: 'Input',
    fieldName: 'defaultValue',
    label: '关联字典',
    suffix: () => {
      function goDictPage() {
        window.open('/system/dict');
      }

      return (
        <Button
          icon={h(VbenIcon, { icon: 'streamline:dictionary-language-book' })}
          onClick={goDictPage}
        >
          打开字典
        </Button>
      );
    },
    help: '下拉框里的数据关联的字典标识KEY，如：sys_normal_disable，请前往字典配置中查看',
    dependencies: {
      if: (values) => values.component === 'Select',
      triggerFields: ['component'],
    },
    rules: 'required',
  },
  // componentProps
];
